import { Key, useEffect } from 'react';
import {
  KnowledgeModelState,
  IRouteComponentProps,
  useDispatch,
  useSelector,
  Link,
} from 'umi';
// import classNames from "classnames";
import Popup from '@/components/Popup';
// import { Anchor } from 'antd';
import Anchor from '@/components/Anchor/index';
import styles from './knowledgeKid.less'; // 启用css module
import ArtCommend from '@/components/ArtCommend/index';
function renderTime(date: any) {
  var dateee = new Date(date).toJSON();
  return new Date(+new Date(dateee) + 8 * 3600 * 1000)
    .toISOString()
    .replace(/T/g, ' ')
    .replace(/\.[\d]{3}Z/, '');
}
const KnowledgsId: React.FC<IRouteComponentProps<{ id: string }>> = ({
  match,
}) => {
  const id = match.params.id;
  const ids = match.url.slice(11, 47);

  // 通过useSelector获取model数据
  const { knowledgsId, knowledgeDetail } = useSelector(
    (state: { knowledge: KnowledgeModelState }) => state.knowledge,
  );
  let floor = JSON.parse(localStorage.getItem('toc') as string) || [];

  let Kid = JSON.parse(localStorage.getItem('kid') as string) || [];

  const lengths = Kid[1];

  // 通过useDispatch获取dispatch
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'knowledge/getKnowledgeDetail',
      payload: ids,
    });
  }, []);
  useEffect(() => {
    dispatch({
      type: 'knowledge/getKnowLedgeKid',
      payload: id,
    });
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.bottom}>
        <div className={styles.share}>
          <Popup ProputItem={knowledgsId}></Popup>
        </div>
        <section>
          <div className={styles.top}>
            <div className={styles.breadcrumb}>
              <span>
                <span className={styles.breadcrumbLink}>
                  <Link to="/knowledge">知识小册</Link>
                </span>
                <span style={{ margin: '0 8px' }}>/</span>
              </span>
              <span>
                <span className={styles.breadcrumbLink}>
                  <Link to="/knowledge">{knowledgeDetail.title}</Link>
                </span>
                <span style={{ margin: '0 8px' }}>/</span>
              </span>
              <span>{knowledgsId.title}</span>
            </div>
          </div>
          <div className={styles.bottomcontent}>
            <article>
              <div className={styles.titles}>
                <h1>{knowledgsId.title}</h1>
                <p>
                  <span>
                    发布于<time>{renderTime(knowledgsId.updateAt)}</time>
                  </span>
                  <span> • </span>
                  <span>阅读量 {knowledgsId.views}</span>
                </p>
              </div>
              <div className={styles.markdown}>
                <div
                  dangerouslySetInnerHTML={{ __html: knowledgsId.html! }}
                ></div>
              </div>
              <div className={styles.information}>
                发布于<time>{renderTime(knowledgsId.updateAt)}</time> | 版权信息
                :&nbsp;
                <Link
                  to="https://creativecommons.org/licenses/by-nc/3.0/cn/deed.zh"
                  target="_blank"
                  rel="noreferrer"
                >
                  非商用-署名-自由转载
                </Link>
              </div>
              <div className={styles.jump}>
                <div className={styles.frame}>
                  <div className={styles.detail_chapter_order}>
                    {Kid.children && Kid.children.length > 1
                      ? Kid.children.map(
                          (
                            item: {
                              id: Key | null | undefined;
                              title: {} | null | undefined;
                            },
                            index: number,
                          ) => {
                            if (item.id !== id && lengths === 2) {
                              if (index == 0) {
                                return (
                                  <div
                                    className={styles.chapter_left}
                                    key={item.id}
                                  >
                                    <Link
                                      to={{
                                        pathname: `/knowledgeList/${Kid.id}/${item.id}`,
                                      }}
                                    >
                                      <span className={styles.detail_point}>
                                        <svg
                                          viewBox="64 64 896 896"
                                          focusable="false"
                                          data-icon="left"
                                          width="1em"
                                          height="1em"
                                          fill="currentColor"
                                          aria-hidden="true"
                                        >
                                          <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
                                        </svg>
                                      </span>
                                      <span>{item.title}</span>
                                    </Link>
                                  </div>
                                );
                              }

                              return (
                                <div
                                  className={styles.chapter_big_marger}
                                  key={item.id}
                                >
                                  <Link
                                    to={{
                                      pathname: `/knowledgeList/${Kid.id}/${item.id}`,
                                    }}
                                    className={styles.sharp_end}
                                  >
                                    <span>{item.title}</span>
                                    <span className={styles.detail_point}>
                                      <svg
                                        viewBox="64 64 896 896"
                                        focusable="false"
                                        data-icon="right"
                                        width="1em"
                                        height="1em"
                                        fill="currentColor"
                                        aria-hidden="true"
                                      >
                                        <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
                                      </svg>
                                    </span>
                                  </Link>
                                </div>
                              );
                            } else if (item.id == id && lengths! > 2) {
                              if (index === 0) {
                                return (
                                  <div
                                    className={styles.chapter_big_marger}
                                    key={item.id}
                                  >
                                    <Link
                                      to={{
                                        pathname: `/knowledgeList/${Kid.id}/${
                                          Kid.children![index + 1].id
                                        }`,
                                      }}
                                      className={styles.sharp_end}
                                    >
                                      <span>
                                        {Kid.children![index + 1].title}
                                      </span>
                                      <span className={styles.detail_point}>
                                        <svg
                                          viewBox="64 64 896 896"
                                          focusable="false"
                                          data-icon="right"
                                          width="1em"
                                          height="1em"
                                          fill="currentColor"
                                          aria-hidden="true"
                                        >
                                          <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
                                        </svg>
                                      </span>
                                    </Link>
                                  </div>
                                );
                              } else if (index === lengths! - 1) {
                                return (
                                  <div
                                    className={styles.chapter_left}
                                    key={item.id}
                                  >
                                    <Link
                                      to={{
                                        pathname: `/knowledgeList/${Kid.id}/${
                                          Kid.children![index + 1].id
                                        }`,
                                      }}
                                    >
                                      <span className={styles.detail_point}>
                                        <svg
                                          viewBox="64 64 896 896"
                                          focusable="false"
                                          data-icon="left"
                                          width="1em"
                                          height="1em"
                                          fill="currentColor"
                                          aria-hidden="true"
                                        >
                                          <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
                                        </svg>
                                      </span>
                                      <span>
                                        {Kid.children![index - 1].title}
                                      </span>
                                    </Link>
                                  </div>
                                );
                              }
                              return (
                                <div
                                  className={styles.middle_chapter}
                                  key={item.id}
                                >
                                  <div className={styles.chapter_margin}>
                                    <Link
                                      to={{
                                        pathname: `/knowledgeList/${Kid.id}/${
                                          Kid.children![index + 1].id
                                        }`,
                                      }}
                                    >
                                      <span className={styles.detail_point}>
                                        <svg
                                          viewBox="64 64 896 896"
                                          focusable="false"
                                          data-icon="left"
                                          width="1em"
                                          height="1em"
                                          fill="currentColor"
                                          aria-hidden="true"
                                        >
                                          <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
                                        </svg>
                                      </span>
                                      <span>
                                        {Kid.children![index - 1].title}
                                      </span>
                                    </Link>
                                  </div>
                                  <div className={styles.chapter_margin}>
                                    <Link
                                      to={{
                                        pathname: `/knowledgeList/${Kid.id}/${
                                          Kid.children![index + 1].id
                                        }`,
                                      }}
                                      className={styles.right_chapter}
                                    >
                                      <span>
                                        {Kid.children![index + 1].title}
                                      </span>
                                      <span className={styles.detail_point}>
                                        <svg
                                          viewBox="64 64 896 896"
                                          focusable="false"
                                          data-icon="right"
                                          width="1em"
                                          height="1em"
                                          fill="currentColor"
                                          aria-hidden="true"
                                        >
                                          <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
                                        </svg>
                                      </span>
                                    </Link>
                                  </div>
                                </div>
                              );
                            }
                          },
                        )
                      : null}
                  </div>
                </div>
              </div>
            </article>
            <div>
              <ArtCommend artUrl={`/knowledge/${Kid.id}/${knowledgsId.id}`} artId={knowledgsId.id}></ArtCommend>
            </div>
          </div>
        </section>
        <aside className={styles.rightcontent}>
          <div className={styles.rightcon}>
            <div className={styles.righttitle}>
              <header>{knowledgeDetail.title}</header>
              <main>
                <ul className={styles.lis}>
                  {knowledgeDetail.children &&
                  knowledgeDetail.children.length > 0 ? (
                    knowledgeDetail.children.map((item: { id: any; }, index: Key | null | undefined) => {
                      return (
                        <li key={index}>
                          <Link
                            to={`/knowledge/${knowledgeDetail.id}/${item.id}`}
                          >
                            <span>{knowledgsId.title}</span>
                          </Link>
                        </li>
                      );
                    })
                  ) : (
                    <li>暂无数据</li>
                  )}
                </ul>
              </main>
            </div>
            <div className={styles.directory}>
              {floor && floor.length > 0 ? (
                <header>目录</header>
              ) : (
                <div className={styles.data}></div>
              )}
              <Anchor floor={floor}></Anchor>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
};

export default KnowledgsId;
